<template>
  <div id="app">
    <div class="page-body">
      <div class="page-top">
        <div class="page-top-item">
          <div class="page-top-img">
            <div class="page-top-out"></div>
          </div>
          <div class="page-top-size">最强大的组件</div>
        </div>
        <div class="page-top-tight">
          <div>iMoM</div>
        </div>
      </div>
      <div class="page-bottom">
        <div class="page-left-info">
          <div class="page-left">
            <div class="page-content">
              <div class="page-scrollbar">
                <div class="page-root">
                  <div>
                    <div
                      :class="{ 'page-click': num === index }"
                      v-for="(d, index) in list"
                      :key="d.key"
                      class="page-item"
                      @click="onClick(d, index)"
                    >
                      <div>图标</div>
                      <div>{{ d.name }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="item-right">
            <div class="item-concat">
              <div class="item-change">
                <component :is="componentChange"></component>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { list, componentsInfo } from "../utli/index";
export default {
  name: "App",
  data() {
    return {
      num: 0,
      list,
      componentChange: componentsInfo.HelloWorld.name,
    };
  },
  components: {
    ...componentsInfo,
  },
  methods: {
    onClick(d, index) {
      this.num = index;
      this.componentChange = componentsInfo[d.key].name;
    },
  },
};
</script>

<style>
.page-click {
  background-color: #e4e6e9;
  color: #386bd7 !important;
}
#app {
  width: 100vw;
  height: 100vh;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
    Helvetica Neue, Arial, Noto Sans, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji", "Helvetica Neue",
    Helvetica, "PingFang SC", "Microsoft YaHei", "微软雅黑", Arial;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  height: 100%;
  padding: 0px;
  margin: 0 auto;
  transform-origin: 0 0;
}
.page-body {
  padding-top: 56px;
  height: 100vh;
  position: relative;
  box-sizing: border-box;
}
.page-top {
  color: #fff;
  background-color: #386bd7;
  width: 100%;
  z-index: 20;
  display: flex;
  top: 0;
  justify-content: space-between;
  left: 0;
  position: absolute;
  height: 56px;
}
.page-bottom {
  width: 100%;
  overflow-y: hidden;
  height: 100%;
}
.page-left-info {
  height: 100%;
  padding-left: 224px;
  position: relative;
}
.page-top-item {
  /* padding: 0px 0px 0px 20px; */
  max-width: 224px;
  align-items: center;
  display: flex;
  flex-direction: row;
}
.page-top-size {
  margin-left: 76px;
}
.page-top-img {
  top: 0;
  left: 0;
  position: absolute;
}
.page-top-out {
  cursor: pointer;
  text-align: center;
  line-height: 56px;
  width: 56px;
  height: 56px;
  background-color: #2554b7;
}
.page-top-tight {
  padding: 0px 20px;
  display: flex;
  align-items: center;
}
.page-left {
  background-color: #f2f4f7;
  z-index: 2;
  width: 224px;
  box-sizing: border-box;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
}
.page-content {
  height: calc(100% - 40px);
}
.page-scrollbar {
  /* margin-right: -17px; */
  overflow: scroll;
  height: 100%;
  margin-bottom: -17px;
  overflow: hidden !important;
}
.page-root {
  margin: 0;
  padding-right: 0;
  position: relative;
  list-style: none;
  border-right-width: 0 !important;
  border-right: 1px solid blue;
}
/* ======================================== */
.page-item {
  cursor: pointer;
  font-size: 14px;
  color: #292929;
  padding: 17px 20px 17px 20px;
  margin: 0px 0px 0px 0px;
  display: flex;
}
.page-item:hover {
  background-color: #e4e6e9;
  color: #386bd7 !important;
}
.page-item > div:nth-child(1) {
  padding-right: 14px;
}

.item-right {
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: visible;
}
.item-concat {
  width: 100%;
  height: calc(100% - 40px);
  background-color: #f6f6f6;
  height: 100%;
  overflow-x: auto;
}
.item-change {
  padding: 16px;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  min-width: 1030px;
}
</style>
